<template>
	<el-row class="mb-2 mt-0">
		<!--新增按钮-->

		<el-button v-auth="'wms_warehouse_add'" type="primary" icon="el-icon-plus"  @click="locationFormRef.openDialog(null, parentClickRow)"
			>{{$t("common.addBtn")}}
		</el-button>
		<!--删除按钮-->
		<el-button v-auth="'wms_warehouse_del'" type="danger" icon="el-icon-delete" @click="deleteRow(selectObjs)">{{$t("common.delBtn")}} </el-button>
	</el-row>
	<el-table
		:data="state.dataList"
		v-loading="state.loading"
		border
		style="width: 100%"
		@selection-change="selectionChangeHandle"
		:cell-style="tableStyle.cellStyle"
		:header-cell-style="tableStyle.headerCellStyle"
	>
		<el-table-column type="selection" width="40" align="center" />
		<el-table-column :label="$t('wms.AddCapacity')" v-if="isRM" width="100" fixed="left">
			<template #default="scope">
				<el-button icon="Plus" size="small" type="primary" @click="capacityeFormRef.openDialog(scope.row.locationCode)" />
			</template>
		</el-table-column>
		<el-table-column prop="id" label="ID" width="80" />
		<el-table-column prop="areaCode" label="区域代码" width="120" show-overflow-tooltip v-if="isRM" />
		<el-table-column prop="rowCode" label="排" width="100" show-overflow-tooltip v-if="isRM">
			<template #default="scope">
				<el-tag effect="plain">{{ scope.row.rowCode }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="layerCode" label="层" width="100" show-overflow-tooltip v-if="isRM" >
			<template #default="scope">
				<el-tag effect="plain" type="success">{{ scope.row.layerCode }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="columnCode" label="列" width="100" show-overflow-tooltip v-if="isRM" >
			<template #default="scope">
				<el-tag effect="plain" type="warning">{{ scope.row.columnCode }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="forbiddenStatus" width="100" label="是否启用" show-overflow-tooltip>
			<template #default="scope">
				<el-tag :type="scope.row.forbiddenStatus === 'Y' ? 'success' : 'danger'" effect="dark" size="default">
					{{ scope.row.forbiddenStatus === 'Y' ? '启用' : '禁用' }}
				</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="locationCode" width="230" label="库位代码" show-overflow-tooltip>
			<template #default="scope">
				<el-tag effect="plain">{{ scope.row.locationCode }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="locationName" width="230" label="库位名称" show-overflow-tooltip />
		<el-table-column prop="locationTypeCode" width="300" label="库位类型代码" show-overflow-tooltip />
		<el-table-column prop="locationTypeName" width="300" label="库位类型名称" show-overflow-tooltip />
		<el-table-column prop="minCapacity" width="100" label="最小容量" show-overflow-tooltip>
			<template #default="scope">
				<el-tag effect="dark">{{ scope.row.minCapacity }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="maxCapacity" width="100" label="最大容量" show-overflow-tooltip>
			<template #default="scope">
				<el-tag effect="dark" type="warning">{{ scope.row.maxCapacity }}</el-tag>
			</template>
		</el-table-column>

		<el-table-column prop="warehouseCode" width="120" label="仓库代码" show-overflow-tooltip>
			<template #default="scope">
				<el-tag effect="plain">{{ scope.row.warehouseCode }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="warehouseName" width="120" label="仓库名称" show-overflow-tooltip />
		<el-table-column label="操作" width="160" fixed="right">
			<template #default="scope">
				<el-button icon="edit" size="small" type="primary" v-auth="'platform_basDicSet_edit'" @click="locationFormRef.openDialog(scope.row, null)" />
				<el-button type="danger" size="small" icon="delete" @click.prevent="deleteRow([scope.row.id])" />
			</template>
		</el-table-column>
	</el-table>
	<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	<location-form ref="locationFormRef" @refresh="getDataList(false)"></location-form>
	<capacitye-form ref="capacityeFormRef" @refresh="getDataList(false)"></capacitye-form>
</template>

<script setup lang="ts">
import { delLocation, getLocationList } from '/@/api/platform/wms/warehouse';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessageBox } from '/@/hooks/message';
import {useI18n} from 'vue-i18n';
const {t} = useI18n();

const LocationForm = defineAsyncComponent(() => import('./form.vue'));
const capacityeForm = defineAsyncComponent(() => import('./capacityeForm.vue'));//新增库位容量

// 搜索变量
const locationFormRef = ref();
const capacityeFormRef = ref()

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getLocationList,
});

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 多选变量
const selectObjs = ref([]) as any;

// 父级点击的行
const parentClickRow = {};

// 判断RM仓库
const isRM = ref(false);

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
};

// 搜索变量
const queryRef = ref();

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	getDataList();
};

// 通过id进行子表的查询
const query = (row: Object) => {
	// 赋值查询参数
	state.queryForm.warehouseId = row.id;

	// 判断是不是RM仓库
	isRM.value = row.warehouseCode == 'RM' ? true : false;

	// 保存选中的行数据
	Object.assign(parentClickRow, row);
	// 刷新子表数据
	getDataList();
};
const deleteRow = (ids: Array<number>) => {
	const idArr = ids.map((item) => ({ id: item }));
	useMessageBox()
		.confirm('此操作将永久删除')
		.then(() => {
			// 删除逻辑
			delLocation(idArr).then(() => {
				// 刷新表格逻辑
				getDataList(false);
			});
		});
};

// 暴露变量
defineExpose({
	resetQuery,
	query,
});
</script>

<style scoped lang="scss"></style>
